<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定位 = 定位模式 + 边偏移 。 */
        /*   position  top/left/right/button     */
        /*static      静态定位   
                relative    相对定位
                absolute    绝对定位
                fixed       固定定位 */
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            height: 200px;
            width: 200px;
            background-color: pink;
        }

        .box2 {
            height: 200px;
            width: 200px;
            background-color: #f600ff;
        }
    </style>
</head>

<body>
    <!-- 1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。 -->
    <!-- 2. 原来在标准流的位置  继续占有 ，后面的盒子仍然以标准流的方式对待它。 -->
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>